<template> 
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
  >
  <h3 :key="TitleText">{{TitleText}}</h3>
    <!-- 渲染没有子菜单的项 -->
    <el-menu-item
      v-for="item in noChilden"
      :key="item.index"
      :index="item.index"
      @click="handlemenu(item)"
    >
      <component class="icon" :is="item.icon"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>
 
    <!-- 渲染有子菜单的项 -->
    <el-sub-menu
      v-for="item in hasChilden"
      :key="item.index"
      :index="item.index"
    >
      <template #title>
        <component class="icon" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        v-for="subItem in item.children"
        :key="subItem.index"
        :index="subItem.index"
        @click="handlemenuchild(item, subItem)"
      >
        <span>{{ subItem.label }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
 
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import {
  Document,
  Setting,
} from '@element-plus/icons-vue';
 
import { useAllDataStore } from '@/stores';
 
import { menuAPI } from '@/api/menu'; 
 
interface MenuItem {
  index: string;
  label: string;
  icon?: any;
  children?: MenuItem[];
}
/*
const menuData = ref<MenuItem[]>([
  { index: 'Home', label: '首页', icon: Document },
  {
    index: 'SysSettings',
    label: '系统设置',
    icon: Setting,
    children: [
      { index: 'UserInfo', label: '个人资料' },
      { index: 'AccountSetting', label: '账户设置' },
    ],
  },
]);
*/
// 确保 menuAPI 是一个数组，并赋值给 menuData
const menuData = ref<MenuItem[]>([]); // 初始化为空数组
 
// 封装数据获取和处理逻辑
const fetchMenuData = async () => {
  try {
    const result = await menuAPI(); // 调用异步 API 获取数据
    console.error('menuAPI :', result);
    if (Array.isArray(result)) {
      menuData.value = result as MenuItem[]; // 确保结果是 MenuItem[] 类型
    } else {
      console.error('menuAPI 返回的数据不是数组:', result);
    }
  } catch (error) {
    console.error('获取菜单数据失败:', error);
  }
};
 
onMounted(() => {
  fetchMenuData(); // 在组件挂载时调用 fetchMenuData 函数
});
 
 
 
const hasChilden = computed(() => menuData.value.filter(item => item.children && item.children.length > 0));
const noChilden = computed(() => menuData.value.filter(item => !item.children || item.children.length === 0));
 
const activeIndex = ref('Home');
const router = useRouter();
 
const handlemenu = (item: MenuItem) => {
  router.push(item.index);
};
 
const handlemenuchild = (item: MenuItem, subItem: MenuItem) => {  
  router.push(subItem.index);
};
 
 
// const isCollapse = ref(true)
const store = useAllDataStore();
const TitleText = computed(() => {
  return store.isCollapse ? '平台' : '测试平台管理';
});
 
const isCollapse = computed(() => store.isCollapse); 
/*
// 使用 defineComponent 显式命名组件
export const MainAsideCont = defineComponent({
  name: 'MainAsideCont'
});
*/
 
</script>
 
<style>
.el-menu {
  height: 100%; /* 设置整个布局的高度为 100%，确保布局占满整个视口 */
  border-right: none; /* 去掉右边框 */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
   min-height: 400px;
}
.el-menu-vertical-demo.el-menu--collapse {
  width: 60px; /* 收缩时的宽度 */
}
 
.icon {
  margin-right: 8px; /* 图标与文字之间的间距 */
  font-size: 18px;   /* 图标的大小 */
  width:18px;
  height:18px;
  size:8px;
  color: #606266;    /* 图标的默认颜色 */
  vertical-align: middle; /* 垂直居中对齐 */
}
 
/* 鼠标悬停时的样式 */
.icon:hover {
  color: #409eff; /* 鼠标悬停时图标的颜色 */
}
 
</style>